Adobe AIR for iOSによるiPhone/iPadアプリケーション開発第1回/第2回 環境構築とHello World

 本記事は工学社月刊I/O 2011年10月号、11月号に掲載された記事の原稿をブログ化したものです。本誌の記事の内容とは異なる場合があります。転載に関しては工学社様の許可を得ております。

• 執筆しました：工学社 月刊I/O Adobe AIR iPhone/iPadアプリ開発 第1回
• 執筆しました：工学社 月刊I/O Adobe AIR iPhone/iPadアプリ開発 第2回

• Adobe AIR for iOSによるiPhone/iPadアプリケーション開発：連載目次

また、下記記事も併せてご参照ください。

• Flash BuilderでiOSアプリを作る【第1回】『Apple iOS Developer Programへの登録（前編）』
• Flash BuilderでiOSアプリを作る【第2回】『Apple iOS Developer Programへの登録（後編）』
• Flash BuilderでiOSアプリを作る【第3回】『証明書ファイルの作成（Mac編）』

■AIR for iOS ～新しいiPhone/iPadアプリケーション開発のスタイル～

昨今スマートフォン向けアプリケーション開発が非常に盛り上がっています。そういった中で皆さんはどういった技術でそれぞれのプラットフォームに対してアプリケーションを提供していくのでしょうか？

• HTMLベースでWebアプリケーションを開発する
• ネイティブアプリケーションを開発する
• Adobe AIR for Android、AIR for iOSを用いて開発する

今回は新しく登場したAdobe AIR（以降AIR）を用いたアプリケーション開発をご紹介していきます。

■実行環境

AIR for iOSの実行環境は下記になります：

• iPhone 3GS、iPhone 4、iPad、iPad 2、iPodTouch 第3世代、第4世代

■開発環境を整える（１）Flash Builder 4.5.1をインストールする

• Adobe Flash Builder 4.5 Premium http://www.adobe.com/jp/products/flash-builder.html

まずは、このFlash Builder 4.5.1をインストールして下さい。他のAIR for iOS開発環境としては有償のAdobe Flash CS5.5と無償のFlashDevelop4.0.0Beta等がありますが、本連載では使用しません。

■開発環境を整える（２）iTunesを用意する

次にiTunesをインストールしておいて下さい。インストール手順は省略します。

■開発環境を整える（３）P12ファイルとプロビジョニングファイルを用意する

次に用意するのがP12ファイルとプロビジョニングファイルです。AIR for iOS開発で最も面倒だと言われているのがこの2つのファイルの用意です。かつこのファイルの用意にはMac環境が必要です（Windows環境でこの2つのファイルを準備する事もできるようですが、推奨されていません）

また、この手順の前にApple iOS Developer Programへの 開発者登録費用が発生します。これはAIR for iOSの利用の有無に関係なく、iOS向けアプリケーション開発で必要になるものです。以下の手順ではデベロッパーアカウントの購入、登録までの手順は省略してあります。

 P12ファイルとプロビジョニングファイル取得手順（Mac上で行います）

• CSRファイルを作成する
  • Macでキーチェーンアクセスを起動する（アプリケーション＞ユーティリティ）
  • メニューからキーチェーンアクセス＞環境設定
  • 証明書タブのOCSP、CRLを「切」にする
  • メニューからキーチェーンアクセス＞証明書アシスタント＞認証局に証明書を要求
  • メールアドレスを入力、要求の処理ラジオボタンでディスクに保存を選択し「続ける」ボタンをクリックする
• CSRファイルを登録する
  • iOS Dev Centerにログインする
  • iOS Provisioning Portalに移動する
  • メニューのCertificatesを選択する
  • DevelopmentタブでRequest Certificateを選択する
  • 先ほど作成したCSRファイルを選択してSubmitをクリック
  • 一旦Certificate画面を抜けHome等に移動する
  • 自身に管理権限が無い場合はこの後管理者にリクエストを承認してもらう必要あり
• CERファイルを登録する
  • メニューのCertificatesに戻る
  • DevelopmentタブでYour Certificateの部分にCERファイル（証明書）が追加されているので、Downloadをクリックする
  • CERファイル（developer_identity.cer）がダウンロードされる
• CERファイルからP12ファイルを書き出す
  • ダウンロードしたdeveloper_identity.cerをダブルクリックする
  • Addをクリックする
  • キーチェーンアクセス＞ログイン＞分類で自分の証明書＞一覧から証明書（iPhone Developer: Tomonari Fukuda,,,のような名前）を選択する
  • メニューからファイル＞書き出す
  • ダイアログのファイルフォーマットをPersonal Information Exchange(.p12)を選択し保存をクリックする
  • 証明書のパスワードを指定する
  • P12ファイルが作成される
• デバイスを登録する
  • iPhone/iPadをiTunesに繋ぎ、デバイスの識別子（UDID）をメモっておく
  • iOS Dev Centerにログインする
  • iOS Provisioning Portalに移動する
  • メニューのDevicesを選択する
  • Manageタブ右上のAdd Devicesボタンをクリックする
  • Device NameとDevice IDを入力する
  • Submitをクリックする
• App IDを登録する
  • iOS Dev Centerにログインする
  • iOS Provisioning Portalに移動する
  • メニューのApp IDsを選択する
  • Manageタブの右上の「New App ID」ボタンをクリックする
  • Descriptionに名前を入力（Fukuda Testなど）、Bundle Identifierに「*」を入力する
  • Submitをクリックする
• プロファイルを作成する
  • iOS Dev Centerにログインする
  • iOS Provisioning Portalに移動する
  • メニューのProvisioningを選択する
  • Developmentタブ右上のNew Profileを選択する
  • Profile Nameにプロファイル名を入力、Certificatesで登録しておいたCERファイルを選択、App IDに先ほど登録したApp IDを選択、Deviceに先ほど登録したデバイスを選択
  • Submitをクリックする
• プロビジョニングファイルの取得
  • iOS Dev Centerにログインする
  • iOS Provisioning Portalに移動する
  • メニューのProvisioningを選択する
  • Developmentタブで先ほど作成したプロビジョニングファイルを探し、Downloadボタンをクリックする

※証明書さえ取得してしまえば、以後アプリケーション開発はWindowsで行っても全く問題ありません！もちろんFlash BuilderはMacでも動作しますので、Macで開発を行う事も可能です。

■Hello Worldアプリケーションの開発（１）新規プロジェクトの作成

開発に向けた準備が出来たので、早速iPhone向けのアプリケーションを作成していきましょう。今回のアプリケーションは画面に文字を表示するだけのものです。

まず、Flash Builderを起動し、メニューからファイル＞新規＞Flexモバイルプロジェクトを選択します。最初にプロジェクト名を入力します。「MonthlyIO_Hello」としましょう。「次へ」をクリックし、モバイル設定に移ります。

モバイル設定ではターゲットプラットフォームを選択します。今回はiPhoneアプリを作成するので、「Apple iOS」にチェックを入れ、「Blackberry Tablet OS」と「Google Android」のチェックを外します。

（※Androidのチェックを入れておけば、この後作成するアプリはAndroid端末をUSBでPCに接続すればそのまま動きます）

次に、「権限」タブに移り、プラットフォームを「Apple iOS」に変更しておきます。特に何も設定しません（Androidの場合にこの権限タブで詳細に権限を設定します）さらに「プラットフォーム設定」タブに移り、ターゲットデバイスを「iPhone/iPod Touch」にしておきます。

「次へ」をクリックし、サーバー設定に移動します。Java、PHP、ASP.NET、ColdFusionでサーバーアプリケーションを開発する場合に少し楽に通信処理を実装してくれる機能がFlash Builderにはあります。今回はスタンドアロンなので、サーバーテクノロジは「なし」です。

「次へ」をクリックし、ビルドパス設定に移動します。ここも初期設定のままにします。最後に「終了」をクリックして、Flexモバイルプロジェクトを新規作成します。

■Hello Worldアプリケーションの開発（２）アプリケーションの開発

次にアプリケーションを開発します。最初に2つのMXMLファイルが開いています。MXMLはXML形式で画面（View）の記述を行うファイルです。MonthlyIO_Hello.xamlが大元のアプリケーションの画面定義、MonthlyIO_HelloHomeView.mxmlがホーム画面の画面定義を行います。ホーム画面の方にラベル（静的テキスト）を追加しましょう。

下記コードを</fx:Declarations>と</s:View>の間に追加します。

<s:Label text="Hello I/O" horizontalCenter="0" verticalCenter="0" />

（完全なソースコード）

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
		xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView">
	<fx:Declarations>
		<!-- 非ビジュアルエレメント (サービス、値オブジェクトなど) をここに配置 -->
	</fx:Declarations>
	<!-- 編集不可なテキストを表すラベルオブジェクト -->
	<s:Label text="Hello I/O" horizontalCenter="0" verticalCenter="0" />
</s:View>

簡単ですが、アプリケーションの開発はこれで終了です。

■Hello Worldアプリケーションの開発（３）エミュレータでのデバッグ

次にアプリケーションのデバッグをエミュレータで行ってみます。iOS向けアプリケーションは実機を通じてのデバッグ実行はできないので、コードにブレークポイントを置いてのテストはエミュレータで行う必要があります。エミュレータは非常に軽く、AIR（ランタイム）でアプリケーションを包んでいるという特性上実機との動作差異がほとんどありません。

メニューの実行＞デバッグ、またはF11をクリックしましょう。すると実行構成画面が表示されます。ターゲットプラットフォームを「Apple iOS」、起動方法をデスクトップ上の「Apple iPhone 3GS」に設定して、「実行」をクリックします。

するとエミュレータが起動してアプリケーションが実行されます。

■Hello Worldアプリケーションの開発（４）プロジェクトの設定

次にプロジェクトの設定を行っておきます。あらかじめ用意しておいたP12証明書とプロビジョニングファイルをプロジェクトに設定します。Flash Builderに戻り、パッケージエクスプローラ―で一番上のMonthlyIO_Helloプロジェクトを右クリックし、下部のプロパティを選択します。Flexビルドのパッケージ化を開き、Apple iOSを選択します。そこで証明書とプロビジョニングファイルを指定します。

■Hello Worldアプリケーションの開発（５）リリースビルドの書き出し

次にiPhoneアプリのリリースビルドを書き出します。この場合、IPAファイルを生成する事になります。メニューからファイル＞エクスポートを選択します。ここでは「エクスポート先フォルダ」を指定します。わたしはプロジェクトのフォルダに「release_build」というフォルダを作って指定しました。Windows 7だとC:\Users\ユーザー名\Adobe Flash Builder 4.5\MonthlyIO_Helloにフォルダを作ります。「次へ」をクリックするとパッケージ化設定に移ります。ここで証明書のパスワードを入力します。パッケージタイプはデフォルトのままにします。Ad hocパッケージはパッケージ作業が高速で行われる代わりにiOS最適化が行われていないのでパフォーマンスが低下します。見た目のチェック作業などでは有用なオプションです。「終了」をクリックして、数分待つとMonthlyIO_Hello.ipaがエクスポートされます。

■Hello Worldアプリケーションの開発（６）実機でのテスト

最後に実機で動作を確認しましょう。iTunesを開き、メニューからファイル＞ファイルをライブラリに追加を選択します。先ほど作成したIPAファイルを選択すると、ライブラリのAppにアプリが追加されます。次に、実機を接続し、同期を行うと実機上にアプリケーションが配置されます。

■最後に

簡単なアプリケーションでしたが少し多くの作業をする必要がありました。しかし、いったんAIR for iOSアプリケーション開発環境が出来てしまえば、非常に高い生産性でiOSアプリケーションを開発する事が出来るようになります。次回以降、より具体的なアプリケーションを通して、iPhone/iPad向けアプリケーション開発を行っていきたいと思います。

■自己紹介

福田寅成 クラスメソッド株式会社（https://classmethod.jp/） RIAエバンジェリスト RIAやクラウドに関するセミナーの開催や技術記事執筆を通じて、先進技術の啓蒙を行う日々。Flex/AIR/Silverlight/AWS/Azure/Android/iOS/Windows Phone/UXと幅広い分野を担当。

EOF